<template>
  <div class="art flex_col">
    <div class="title flex_row">
      <span><span style="color:#3963bc">{{item.class_id | className}}</span>  · {{item.created_at | timer}}</span>
    </div>
    <span class="main">{{item.name}}</span>
    <span class="tags">
      <template v-for="tag in tags">
        <Tag class="tag" color="blue" :key="tag">{{tag}}</Tag>
      </template>
      
    </span>
  </div>
</template>

<script>
import { mixin } from "@/utils/mixin";
export default {
  mixins: [mixin],
  props:{
    item:Object
  },
  mounted(){
    
  },
  computed:{
    tags(){
      return this.item.tags.split(',')
    }
  }
};
</script>

<style lang="less" scoped>
.art {
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  border-bottom: 1px solid #f5f5f5;
  &:hover{
      cursor: pointer;
      background-color: #fcfcfc;
  }
  .title span {
    color: #999;
  }
  .main {
    display: inline;
    font-size: 17px;
    margin: 4px 0;
    cursor: pointer;
    &:hover {
      color: #3963bc;
    }
  }
}
.tag {
  margin-right: 10px;
}
</style>